import { Collapse, List, NavBar, Tag } from 'antd-mobile'
import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'

function Index() {
  const nav = useNavigate()
  const { state } = useLocation()
  console.log(state)
  return (
    <div>
      <NavBar onBack={() => nav(-1)}>详情页面</NavBar>
      <div>
        <h3>车票详情</h3>
        <div>
          <div className='aaa'>
            <span>{state.aasn}</span>
            <span>{state.dasn}</span>
            <span>{state.ast}</span>
            <span>{state.dst}</span>
            <span>{state.at}</span>
            <span>{state.dt}</span>
            <span>{state.sd}</span>
            <span>￥{state.timespanNumber}</span>
          </div>
        </div>
      </div>
      <div>
        <h3>飞猪优选</h3>
        <Collapse accordion arrowIcon={(active) => active ? (<Tag color='warning'>收起</Tag>) : (<Tag color='warning'>订票</Tag>)}>
          <Collapse.Panel key='1' title={<div>商务座 ￥<span>{state.timespanNumber * 3}</span></div>}>
            <List>
              <List.Item description='可以帮您更快抢票'>
                急速预定￥{state.timespanNumber * 3.3}
              </List.Item>
              <List.Item description='保证您的旅途安心'>
                正常买票￥{state.timespanNumber * 3}
              </List.Item>
            </List>
          </Collapse.Panel>
          <Collapse.Panel key='2' title={<div>一等座 ￥<span>{state.timespanNumber * 2}</span></div>}>
             <List>
              <List.Item description='可以帮您更快抢票'>
                急速预定￥{state.timespanNumber * 2.3}
              </List.Item>
              <List.Item description='保证您的旅途安心'>
                正常买票￥{state.timespanNumber * 2}
              </List.Item>
            </List>
          </Collapse.Panel>
          <Collapse.Panel key='3' title={<div>二等座 ￥<span>{state.timespanNumber}</span></div>}>
             <List>
              <List.Item description='可以帮您更快抢票'>
                急速预定￥{state.timespanNumber *1.3}
              </List.Item>
              <List.Item description='保证您的旅途安心'>
                正常买票￥{state.timespanNumber *1}
              </List.Item>
            </List>
          </Collapse.Panel>
        </Collapse>
      </div>
    </div>
  )
}

export default Index